<template>
  <el-dialog title="设备详情" :visible.sync="equipmentdialog" width="40%" :before-close="handleClose">
    <el-row>
      <el-col :span="5" :offset="1">销售量：<span>{{ orderCount }}个</span>
      </el-col>
      <el-col :span="5" :offset="1">销售额：<span>{{ orderAmount }}元</span>
      </el-col>
      <el-col :span="4" :offset="2">补货次数：<span>{{ supplyCount }}次</span>
      </el-col>
      <el-col :span="4" :offset="2">维修次数：<span>{{ repairCount }}次</span>
      </el-col>
      <el-row class="xiao">
        <el-col :span="24">商品销量(月)</el-col>
      </el-row>
      <el-row class="xiao liang">
        <el-col v-for="item in skuCollect" :key="item.skuId" :span="6">{{ item.skuName }}:{{ item.count }}</el-col>
      </el-row>
    </el-row>
  </el-dialog>
</template>

<script>
import dayjs from 'dayjs'
import { orderCountAPI, orderAmountAPI, skuCollectAPI, repairCountAPI, supplyCountAPI } from '@/api/vm'
export default {
  props: {
    equipmentdialog: {
      type: Boolean,
      default: false
    },
    countInfo: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      skuCollect: [],
      repairCount: 0,
      supplyCount: 0,
      orderCount: 0,
      orderAmount: 0
    }
  },
  computed: {
    aftertime() {
      return dayjs(new Date()).format('YYYY-MM-DD')
    },
    beforetime() {
      return dayjs(Date.now() - 3600 * 24 * 1000).format('YYYY-MM-DD')
    },
    startOf() {
      return dayjs(Date.now()).startOf('month').format('YYYY-MM-DD HH:mm:ss')
    },
    endOf() {
      return dayjs(new Date(new Date().toLocaleDateString()).getTime() + 24 * 60 * 60 * 1000 - 1).format('YYYY-MM-DD HH:mm:ss')
    }
  },
  watch: {
    countInfo() {
      this.getInfo()
    }
  },
  // updated() {
  //   this.getInfo()
  // },
  methods: {
    handleClose() {
      this.$emit('update:equipmentdialog', false)
    },
    async getInfo() {
      console.log(this.countInfo.innerCode)
      const sku = await skuCollectAPI(this.beforetime, this.aftertime, this.countInfo.innerCode)
      this.skuCollect = sku.data
      console.log(sku)
      const result = await repairCountAPI(this.beforetime, this.aftertime, this.countInfo.innerCode)
      this.repairCount = result.data
      const supplyCount = await supplyCountAPI(this.beforetime, this.aftertime, this.countInfo.innerCode)
      this.supplyCount = supplyCount.data
      const orderCount = await orderCountAPI(this.startOf, this.endOf, this.countInfo.innerCode)
      this.orderCount = orderCount.data
      const orderAmount = await orderAmountAPI(this.startOf, this.endOf, this.countInfo.innerCode)
      this.orderAmount = orderAmount.data / 100
    }
  }
}
</script>

<style lang="scss" scoped>
.xiao {
  padding: 0 20px;
}

.liang {
  margin-top: 20px;

  .el-col {
    border: 1px solid #d8dde3;
  }
}
</style>
